<template>
  <div class="pagecontent">
    <div class="commonheader">
      <i class="iconback"
         @click="backClick"></i>
      <h3>筛选条件</h3>
    </div>
    <div class="muibottom">
      <a class="u-button reset"
         @click="resetClick">重置</a><a class="u-button sure"
         @click="sureClick">确定</a>
    </div>
    <div class="muicontent">
      <p class="tip"><i></i>以下筛选条件均为非必选项</p>
      <div class="conditionbox"
           v-for="(item, index) in filterdata"
           :key="index">

        <div class="titlebox">
          <h3>{{item.title}}</h3><a class="arrow"
             v-show="item.subdata.length>4"
             @click="moreClick($event)"></a>
        </div>
        <ul class="conditionlist"
            v-if="item.title!=='长'&&item.title!=='宽'&&item.title!=='高'">
          <li v-for="(childitem, childindex) in item.subdata"
              :key="childindex"
              :class="{cur:childindex==filterdata[index].showItem}"
              @click="changeColor(index,childindex)">{{childitem}}</li>
        </ul>
        <ul class="conditionset"
            v-else-if="item.title==='长'">
          <li><input type="text"
                   placeholder="长度"
                   v-model="minlength"
                   readonly="readonly"
                   @click="openPicker" />
            <nut-picker :is-visible="isVisible"
                        :list-data="lengthData"
                        @close="switchPicker('isVisible')"
                        @confirm="setLengthValue">
            </nut-picker>
          </li>
        </ul>
        <ul class="conditionset"
            v-else-if="item.title==='宽'">
          <li><input type="text"
                   placeholder="宽度"
                   readonly="readonly"
                   v-model="minwidth"
                   @click="openPicker1" />
            <nut-picker :is-visible="isVisible1"
                        :list-data="lengthData"
                        @close="switchPicker('isVisible1')"
                        @confirm="setWidthValue">
            </nut-picker>
          </li>
        </ul>
        <ul class="conditionset"
            v-else-if="item.title==='高'">
          <li><input type="text"
                   placeholder="高度"
                   readonly="readonly"
                   v-model="minheight"
                   @click="openPicker2" />
            <nut-picker :is-visible="isVisible2"
                        :list-data="lengthData"
                        @close="switchPicker('isVisible2')"
                        @confirm="setHeightValue">
            </nut-picker>
          </li>
        </ul>
        <!-- <ul class="conditionset"
            v-else>
          <li><input type="text"
                   placeholder="最小长度"
                   v-model="minlength" /><em></em><input type="text"
                   placeholder="最大长度"
                   v-model="maxlength" /></li>
          <li><input type="text"
                   placeholder="最小宽度"
                   v-model="minwidth" /><em></em><input type="text"
                   placeholder="最大宽度"
                   v-model="maxwidth" /></li>
          <li><input type="text"
                   placeholder="最小高度"
                   v-model="minheight" /><em></em><input type="text"
                   placeholder="最大高度"
                   v-model="maxheight" /></li>
        </ul> -->
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import Bus from '../../../static/js/bus'
export default {
  name: 'filterCondition',
  data () {
    return {
      filterAsw: [],
      flags: true,
      filterdata: [
        {
          'showItem': null,
          'title': '系列',
          'subdata': ['Zumi', 'Zmui', 'Zmui', 'Zmui', 'Zmui', 'Zmui']
        },
        {
          'showItem': null,
          'title': '包面颜色',
          'subdata': ['单一色', '非单一色']
        },
        {
          'showItem': null,
          'title': '型号',
          'subdata': ['大号', '中号', '小号', '迷你']
        },
        {
          'showItem': null,
          'title': '性别',
          'subdata': ['男', '女', '通勒']
        },
        {
          'showItem': null,
          'title': '长',
          'subdata': []
        },
        {
          'showItem': null,
          'title': '宽',
          'subdata': []
        },
        {
          'showItem': null,
          'title': '高',
          'subdata': []
        },
        {
          'showItem': null,
          'title': '功能款式',
          'subdata': ['手提包', '单肩包', '斜挎包', '双肩包', '手拿包', '钱包', '零钱包', '公文包', '旅行包']
        },
        {
          'showItem': null,
          'title': '特征款式',
          'subdata': ['水桶包', '小方包', '信封包', '邮差包', '波士顿包', '子母包', '马鞍包', '小圆包', '贝壳包', '小猪包']
        },
        {
          'showItem': null,
          'title': '流行元素',
          'subdata': ['链条', '撞色', '字母', '印花', '菱格', '压花', '锁头', '流苏', '格子', '花朵', '鳄鱼纹', '拼接', '皮带装饰', '铆钉', '编织', '涂鸦', '亮片']
        },
        {
          'showItem': null,
          'title': '材质',
          'subdata': ['牛皮', '羊皮', '鹿皮', '鳄鱼皮', '珍珠鱼皮', '蜥蜴皮', '蟒蛇皮', '鸵鸟皮', '麂皮', 'PVC', 'PU', '帆布', '超纤合成革', '尼龙布', '丝绒', '牛津纺', '牛仔布', '棉布']
        }
      ],
      isVisible: false,
      isVisible1: false,
      isVisible2: false,
      lengthData: [['6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40']],
      minlength: '',
      maxlength: '',
      minwidth: '',
      maxwidth: '',
      minheight: '',
      maxheight: ''
    }
  },

  beforeCreate () {
    this.$http.get(`${this.baseUrl.queryByPId}?pid=` + this.$route.query.keyId).then((res) => {
      if (res.data.code === 200) {
        this.filterdata[0].subdata = res.data.data.kind
      }
    })
  },
  beforeDestroy () {
    if (this.minlength) {
      this.filterAsw.push({ name: '最小长度', value: Number(this.minlength) - 1 })
      this.filterAsw.push({ name: '最大长度', value: Number(this.minlength) + 1 })
    }
    // if (this.maxlength) {
    //   this.filterAsw.push({ name: '最大长度', value: Number(this.minlength) + 1 })
    // }
    if (this.minwidth) {
      this.filterAsw.push({ name: '最小宽度', value: Number(this.minwidth) - 1 })
      this.filterAsw.push({ name: '最大宽度', value: Number(this.minwidth) + 1 })
    }
    // if (this.maxwidth) {
    //   this.filterAsw.push({ name: '最大宽度', value: this.minwidth + 1 })
    // }
    if (this.minheight) {
      this.filterAsw.push({ name: '最小高度', value: Number(this.minheight) - 1 })
      this.filterAsw.push({ name: '最大高度', value: Number(this.minheight) + 1 })
    }
    // if (this.maxheight) {
    //   this.filterAsw.push({ name: '最大高度', value: this.minheight + 1 })
    // }
    this.filterAsw.push({
      name: 'serialNumber',
      value: this.$store.state.goodsBrand
    })
    Bus.$emit('sendfilterdata', this.filterAsw)
  },
  methods: {
    openPicker () {
      // 显示隐藏弹框
      this.isVisible = !this.isVisible
    },
    openPicker1 () {
      this.isVisible1 = !this.isVisible1
    },
    openPicker2 () {
      this.isVisible2 = !this.isVisible2
    },
    switchPicker (param) {
      // 传递过来的是哪个选择框
      this[`${param}`] = !this[`${param}`]
    },
    setLengthValue (param) {
      // 赋值第一个input长度
      this.minlength = param[0]
    },
    setWidthValue (param) {
      // 赋值第二个input宽度
      this.minwidth = param[0]
    },
    setHeightValue (param) {
      // 赋值第三个input高度
      this.minheight = param[0]
    },
    resetClick () { // 重置
      let curTag = $('.conditionlist li.cur')
      curTag.removeClass('cur')
      this.filterAsw = []
    },
    sureClick () {
      this.$store.commit('filterObjFun', this.filterAsw)
      console.log(this.filterAsw)
      // let aswArray = $('.conditionlist li.cur')
      // if (aswArray.length === $('.conditionlist').length) { // 选中的个数和总的筛选的个数相同
      // for (let i = 0; i < aswArray.length; i++) {
      //   this.filterAsw.push($(aswArray[i])[0].innerHTML)
      // }
      this.$router.push({ path: '/searchResult' })
      // }
    },
    backClick () {
      this.$router.go(-1)
    },
    changeColor (index, childindex) {
      if (childindex !== this.filterdata[index].showItem) {
        this.filterdata[index].showItem = childindex
      } else {
        this.filterdata[index].showItem = -1
        for (var i = 0; i < this.filterAsw.length; i++) {
          if (this.filterdata[index].subdata[childindex] === this.filterAsw[i].value) {
            this.filterAsw.splice(i, 1)
            break
          }
        }
        return false
      }

      if (this.filterAsw.length > 0) {
        for (let i = 0; i < this.filterAsw.length; i++) {
          if (this.filterAsw[i].name === this.filterdata[index].title) {
            this.filterAsw[i].value = this.filterdata[index].subdata[childindex]
            this.flags = false
            break
          }
        }
        if (this.flags) {
          this.filterAsw.push({ name: this.filterdata[index].title, value: this.filterdata[index].subdata[childindex] })
        }
      } else {
        this.filterAsw.push({ name: this.filterdata[index].title, value: this.filterdata[index].subdata[childindex] })
      }
    },
    moreClick (e) {
      e.target.classList.toggle('up')
      var pElement = e.currentTarget.parentElement
      var nElement = pElement.nextElementSibling
      if (nElement.className === 'conditionlist') {
        nElement.classList.add('hgauto')
      } else {
        nElement.classList.remove('hgauto')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.muicontent
  position absolute
  top 0.9rem
  bottom 1.02rem
  left 0
  right 0
  overflow-y auto
  .tip
    height 0.7rem
    line-height 0.7rem
    padding-left 0.2rem
    color #d21733
    font-size 0.28rem
    i
      display inline-block
      width 0.33rem
      height 0.36rem
      background url('../../../static/images/brand/tip.png') no-repeat
      background-size 100% 100%
      margin-right 0.25rem
      vertical-align -0.04rem
  .conditionbox
    .titlebox
      position relative
    h3
      font-size 0.24rem
      color #666
      margin-bottom 0.26rem
      padding-top 0.05rem
      padding-left 0.24rem
    .arrow
      display inline-block
      width 0.22rem
      height 0.12rem
      background url('../../../static/images/brand/arrow.png') no-repeat
      background-size 100% 100%
      position absolute
      right 0.25rem
      top 0.1rem
    .arrow.up
      transform rotate(180deg)
    .conditionlist
      clear both
      overflow hidden
      padding 0 0.15rem
      max-height 0.9rem
      transition max-height 0.3s ease-out
      li
        list-style none
        float left
        min-width 1.6rem
        padding 0 0.1rem
        height 0.72rem
        line-height 0.72rem
        font-size 0.26rem
        color #333
        text-align center
        background #fafafa
        margin 0 0.1rem 0.18rem 0.1rem
        border-radius 0.03rem
        box-sizing border-box
      .cur
        color #d21733
        border 1px solid #d21733
        background #fdfdfd
    .conditionlist.hgauto
      max-height 10rem
    .conditionset
      padding-left 0.25rem
      li
        margin-bottom 0.2rem
        list-style none
        input
          width 3.4rem
          height 0.56rem
          line-height 0.56rem
          background #fafafa
          font-size 0.24rem
          text-align center
          border-radius 0.5rem
        em
          display inline-block
          width 0.36rem
          height 0.02rem
          background #ccc
          margin 0 0.3rem
          vertical-align 0.06rem
.muibottom
  height 1rem
  position fixed
  left 0
  right 0
  bottom 0
  .u-button
    display inline-block
    width 50%
    text-align center
    line-height 1rem
    font-size 0.32rem
    box-sizing border-box
    background #fff
  .reset
    color #666
    border-top 2px solid #f6f5f5
  .sure
    color #fff
    background #d21733
    border-top 2px solid #d21733
</style>
